<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-20 13:15:21
 * @LastEditors: 刘引
 * @LastEditTime: 2021-12-27 16:40:19
-->
<template>
  <div class="root-top">
    <div class="w">
      <div class="container">
        <div class="left">
          <span>欢迎来到硬姐智造PCBA一站式服务官网！</span>
        </div>
        <div class="right">
          <span>
            <svg
              t="1639979715860"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2044"
              width="14"
              height="14"
            >
              <path
                d="M608.929951 671.715102c-34.230808 0-60.892995-2.580212-68.461616-3.440282-17.545439-2.064169-30.274483-17.717453-28.210314-35.262893 1.892155-17.545439 17.545439-30.102469 35.262893-28.210314 79.642533 8.77272 201.772552 1.204099 223.102301-43.175542 7.568621-15.825298 26.662187-22.705863 42.659499-14.965228 15.997312 7.568621 22.705863 26.834201 14.965228 42.659499C794.361162 659.330086 683.412061 671.715102 608.929951 671.715102z"
                p-id="2045"
                fill="#da5d28"
              />
              <path
                d="M896.021502 639.892491c-17.717453 0-31.994625-14.277171-31.994625-31.994625l0-110.261045-42.831514-15.309256c-12.729044-4.472367-21.32975-16.685369-21.32975-30.102469 0-158.769024-129.182597-287.951621-287.951621-287.951621-158.769024 0-287.951621 129.182597-287.951621 287.951621 0 10.320847-4.988409 19.953637-13.417101 25.974131l-18.577524 13.245087 0 116.281539c0 17.717453-14.277171 31.994625-31.994625 31.994625s-31.994625-14.277171-31.994625-31.994625l0-132.794893c0-10.320847 4.988409-19.953637 13.417101-25.974131l18.921552-13.589115c8.77272-186.291282 163.069377-335.255501 351.596842-335.255501C698.377289 100.284226 851.469847 245.980178 863.338821 429.519234l43.51957 15.48127c12.729044 4.472367 21.32975 16.685369 21.32975 30.102469l0 132.794893C928.016126 625.61532 913.738955 639.892491 896.021502 639.892491z"
                p-id="2046"
                fill="#da5d28"
              />
              <path
                d="M639.892491 783.696288 639.892491 774.063497c28.0383-21.845792 50.400134-43.003528 63.645221-72.761969-29.070385 4.644381-61.581052 2.92424-87.727196 2.92424-31.994625 0-59.344868 0.860071-76.030237-1.032085-35.090879-3.956325-60.376953-38.703175-56.592642-73.794053 3.956325-35.090879 35.778935-60.720981 70.697799-56.592642 71.213842 7.568621 149.82429-0.688056 181.302873-13.933143 1.376113-29.242399 1.032085-60.032925 1.032085-83.426844 0-136.923232-83.254829-218.113892-216.737779-221.038132-0.688056 0-18.749538 0-19.437594 0-133.48295 2.752226-213.469511 84.974971-213.469511 222.070217 0 84.630942 1.376113 222.758273 97.359987 297.756425l0 9.63279c-127.978498 19.953637-226.026541 72.589955-226.026541 142.083655 0 17.717453 14.793214 34.230808 32.510667 34.230808l628.023518 0c17.717453 0 39.907274-16.513355 39.907274-34.230808C858.522426 856.286242 768.043004 803.821939 639.892491 783.696288z"
                p-id="2047"
                fill="#da5d28"
              />
            </svg>客服
          </span>
          <span class="phone">
            <svg
              t="1639980307574"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2919"
              width="15"
              height="15"
            >
              <path
                d="M871.673333 770.813333a53.393333 53.393333 0 0 1 0 75.42l-37.713333 37.713334c-27.866667 27.866667-64.52 44.84-108.946667 50.46a264.333333 264.333333 0 0 1-33.213333 2.04c-32.333333 0-67.22-5.46-104.146667-16.32C487.42 890.666667 382 824.226667 290.9 733.1S133.333333 536.586667 103.873333 436.346667c-14.666667-49.94-19.493333-96.153333-14.28-137.333334 5.62-44.426667 22.593333-81.08 50.46-108.946666l37.713334-37.713334a53.393333 53.393333 0 0 1 75.42 0l165.94 165.933334a53.4 53.4 0 0 1 0 75.426666l-37.713334 37.686667c-21.333333 21.333333-0.1 90.413333 60.34 150.846667s129.486667 81.7 150.846667 60.34l37.713333-37.713334a53.4 53.4 0 0 1 75.426667 0zM597.333333 384a42.713333 42.713333 0 0 1 42.666667 42.666667 21.333333 21.333333 0 0 0 42.666667 0 85.426667 85.426667 0 0 0-85.333334-85.333334 21.333333 21.333333 0 0 0 0 42.666667z m314.5-90.2A341.073333 341.073333 0 0 0 597.333333 85.333333a21.333333 21.333333 0 0 0 0 42.666667c164.666667 0 298.666667 134 298.666667 298.666667a21.333333 21.333333 0 0 0 42.666667 0 339.153333 339.153333 0 0 0-26.833334-132.866667zM597.333333 256c94.106667 0 170.666667 76.56 170.666667 170.666667a21.333333 21.333333 0 0 0 42.666667 0 213.333333 213.333333 0 0 0-213.333334-213.333334 21.333333 21.333333 0 0 0 0 42.666667z"
                fill="#5C5C66"
                p-id="2920"
              />
            </svg>400-800-5383 | 189-2740-7692
          </span>
          <span class="we-chat">
            <svg
              t="1639980374831"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4448"
              width="15"
              height="15"
            >
              <path
                d="M704 397.92c-15.04-140.96-151.04-251.36-316.48-251.36-176 0-317.92 124.16-317.92 277.28a267.36 267.36 0 0 0 129.12 224c8.8 5.6-29.12 85.28-19.68 90.08s28.48-11.2 48.8-26.56 39.52-29.76 48-26.88a362.56 362.56 0 0 0 112 17.44 376.16 376.16 0 0 0 57.44-4.48c36.96 84.8 133.44 145.44 246.56 145.44a305.12 305.12 0 0 0 88.16-12.96c4.48-1.28 21.76 11.36 39.2 24.16s35.36 25.76 39.68 24c13.76-5.76-25.44-69.92-12.96-77.44 65.76-40.48 108.48-105.92 108.48-180-0.16-120-111.04-217.12-250.4-222.72z m-109.12 167.2a28 28 0 1 1 27.68-28 27.84 27.84 0 0 1-27.68 28z m-165.76 54.72a204.64 204.64 0 0 0 1.44 24.32 314.72 314.72 0 0 1-42.88 2.88 302.08 302.08 0 0 1-103.36-17.76c-3.2-1.12-14.4-4.64-20.48 0a265.28 265.28 0 0 0-32 32 142.4 142.4 0 0 0 8.96-38.4c1.12-10.24-14.56-17.6-17.76-19.68a220 220 0 0 1-98.08-178.4c0-122.88 117.6-222.4 262.72-222.4 135.36 0 246.88 86.72 260.96 198.24-124.48 17.44-219.52 108.96-219.52 219.2z m331.68-54.72a28 28 0 1 1 27.68-28 27.68 27.68 0 0 1-27.68 28z"
                fill="#55b737"
                p-id="4449"
              />
              <path
                d="M498.24 286.08a41.92 41.92 0 1 0 41.44 41.92 41.76 41.76 0 0 0-41.44-41.92zM276.96 286.08a41.92 41.92 0 1 0 41.6 41.92 41.6 41.6 0 0 0-41.6-41.92z"
                fill="#55b737"
                p-id="4450"
              />
            </svg>微信咨询
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="root-logo">
    <div class="w">
      <div class="container">
        <div class="logo-img">
          <img src="../assets/img/Header/logo.png" alt />
          <img src="../assets/img/Header/introduce.png" alt />
        </div>
        <div class="login-btn">
          <el-button>
            <router-link to="/login">登录</router-link>
          </el-button>
          <el-button>
            <router-link to="/register" style="color: #4a5462;">注册</router-link>
          </el-button>
        </div>
      </div>
    </div>
  </div>

  <div class="root-bar">
    <div class="w">
      <div class="container">
        <nav>
          <ul class="top-bar">
            <li>
              <router-link to="/" exact>首页</router-link>
            </li>
            <li>
              <router-link to="/valuation">SMT计价</router-link>
            </li>
            <li>
              <router-link to="/technology">工艺制成能力</router-link>
            </li>

            <li>
              <router-link to="/about">关于硬姐制造</router-link>
              <!-- <span class="icon">▾</span>
              <ul class="drop-down">
                <li>硬姐制造简介</li>
                <li>工厂设备</li>
                <li>竞争优势</li>
                <li>联系我们</li>
              </ul>-->
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script >
export default {};
</script>

<style lang="scss" scoped>
.root-top {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  border-bottom: 1px solid #f1f1f1;
  .container {
    display: flex;
    align-items: center;
    justify-content: start;
    justify-content: space-between;
    // justify-content: space-around;
    height: 31px;
    span {
      font-size: 12px;
      line-height: 28px;
      letter-spacing: 0;
      color: #666;
    }
    .right {
      span {
        padding: 0 10px;
        svg {
          vertical-align: middle;
          display: inline-block;
          padding: 0 4px;
        }
      }
      .we-chat {
        padding-right: 0;
      }
    }
  }
}

.root-logo {
  .w {
    .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100px;
      .login-btn {
        background-color: #fdf2ef;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;

        .el-button {
          border-radius: 20px !important;
          border: none;
          //  !important;
          &:nth-child(1) {
            color: #fff;
            background-color: #ea5404;
          }
          &:nth-child(2) {
            color: #2c3e50;
            margin: 0;
            background-color: #fdf2ef;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
          }
          // color: #fff2ee;
        }
      }
    }
  }
  .logo-img {
    img {
      &:nth-child(2) {
        padding: 0 20px;
      }
    }
  }
}

.root-bar {
  z-index: 999;
  .router-link-active {
    color: #333333;
    background-color: #fff;
  }
  .w {
    width: 100%;
    .container {
      nav {
        .top-bar {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          background-color: #622e1a;
          color: #ece6e3;
          height: 50px;
          li {
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            a {
              width: 150px;
              height: 50px;
              display: block;
            }

            cursor: pointer;

            &:nth-child(4) {
              text-align: center;
              .icon {
                color: #fff;
              }

              // &:hover {
              //   background-color: #fff;
              //   color: black !important;
              //   transition: all 0.1s;
              //   .icon {
              //     color: #ea5404;
              //   }
              //   .drop-down {
              //     display: block;
              //     z-index: 999;

              //     li {
              //       font-weight: normal;
              //       transition: all 0.2s;

              //       &:hover {
              //         background-color: #fdf2ef;
              //         color: black !important;
              //       }
              //     }
              //   }
              // }
            }
          }
          .drop-down {
            display: none;
            position: absolute;
            background-color: #fff;
            z-index: 999;
          }
        }
      }
    }
  }
}
</style>